/* TomatoPestMonitoringSystem.scss */
.container_government {
  div {
    box-sizing: border-box;
  }

  .news {
    max-width: 20rem; // 300px to 20rem (assuming 1rem = 16px)

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
    // color: #8EE5EE;
    color: #ebf357;
    //font-family: 雅痞-简;
  }

  .scroll {
    height: 9.375rem; // 150px to 9.375rem
    overflow-y: auto;
  }

  .scroll::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0.625rem; // 10px to 0.625rem
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.0625rem; // 1px to 0.0625rem
  }

  .scroll::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0.625rem; // 10px to 0.625rem
    box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.2); // 5px to 0.3125rem
    background: #07910a;
  }

  .scroll::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.2); // 5px to 0.3125rem
    border-radius: 0.625rem; // 10px to 0.625rem
    background: #62e8a5;
  }

  .header {
    height: 12.5rem; // 200px to 12.5rem
    background: url('../assets/layout/header.png');
    background-size: 100% 12.5rem; // 200px to 12.5rem

    .title {
      width: 23.75rem; // 380px to 23.75rem
      margin: 0 auto;
      text-align: center;
      color: #fff;
      font-size: 1.75rem; // 28px to 1.75rem
      //font-family: 时尚中黑简体;
    }
  }

  .content {
    position: absolute;
    top: 3.75rem; // 60px to 3.75rem
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;

    .chart_box {
      background: url('../assets/layout/chart_box_bg.png');
      background-size: 100% 100%;
      margin: 0 0.1rem 0.1rem 0.1rem;
      padding: 0.1rem;
    }

    .content_one {
      flex: 2;
      display: flex;
      flex-direction: row;

      .content_one_left,
      .content_one_right {
        flex: 1;
        display: flex;
        flex-direction: column;

        &>div {
          flex: 1;
        }
      }

      .content_one_center {
        flex: 2;
        display: flex;
        flex-direction: column;

        &>div {
          background: url('../assets/layout/chart_center_box_bg.png');
          background-size: 100% 100%;
          flex: 1;
          margin: 0 0 0.5rem 0;
        }

        .content_one_center_map {
          padding: 1rem 0.5rem;
          border-radius: 0.3125rem; // 5px to 0.3125rem
          overflow: hidden;
        }
      }
    }

    .content_two {
      flex: 1;
      display: flex;
      flex-direction: row;

      &>div {
        flex: 1;
      }
    }
  }
}
